import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios' 
// 这里无法使用this.$http 所以调用了axios实例，实际上这里还可以优化，调用本地已经封装好的 axios 比如 import $http from './http' 
// 使用时 直接可以用$http.get(。。。) 这样的话封装过的拦截器就起作用了 然后我们调用api/list的时候才能把token头带上

Vue.use(Vuex)

export default new Vuex.Store({
  state: { 
    list:{} ,
    token:localStorage.getItem('token')?localStorage.getItem('token'):''  // 将token持久化，如果页面刷新也可以从本地立即获取 无需用户再次登录
  },
  mutations: {
    setList(state,data){
      state.list=data;
    },
    
    // 设置token
    setToken(state,data){
      state.token=data;
      localStorage.setItem('token',data);
    },
    
    // 清除token
    removeToken(state){
      state.token='';
      localStorage.setItem('token','');
    }
  },
  actions: {
    GET_LIST(context){
      return new Promise((resolve,reject)=>{
        axios.get('/api/list').then((res)=>{
          context.commit('setList',res.data);
          resolve(res.data)
        },()=>{
          reject();
        });
      })
    },
    LOGIN(context,data){

      // 返回一个promise对象，可以在登录页被调用 
      return new Promise((resolve,reject)=>{
        axios.post('/api/login',data).then((res)=>{
          if(res.success){ // 如果登录成功 记录token
            context.commit('setToken',res.token);
          }      
          resolve(res) // 将res数据返回到上层调用页面
        },(err)=>{
          reject(err) // 如果报错，将错误返回到上层调用页面
        })
      })
    }
  },
  modules: {
  },
  getters:{
   
  }
})
